<template>
  <div class="treeCom" style="padding-right: 20px">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      style="margin-bottom: 12px; width: 90%"
    >
    </el-input>
    <div class="treeCnt">
      <el-tree
        v-if="defaultProps.label"
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        :render-content="renderContent"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import { crudQueryList } from "@/api/render/pager.js";
export default {
  props: {
    searchJson: {
      type: Object,
      default: () => {},
    },
    getList: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      filterText: "",
      data: [],
      defaultProps: {},
      clickValue: {},
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    renderContent(h, { node, data, store }) {
      return this.searchJson?.pageType === "leftTreeRightTableDept" ? (
        <span class="custom-tree-node">
          {node.label.length >= 11 ? (
            <el-tooltip
              class="item"
              effect="dark"
              content={`${node.label}（${data.weight}）`}
              placement="right-end"
            >
              (
              <span>
                {node.label}（{data.weight}）
              </span>
              )
            </el-tooltip>
          ) : (
            <span>
              {node.label}（{data.weight}）
            </span>
          )}
        </span>
      ) : (
        <span class="custom-tree-node">
          {node.label.length >= 11 ? (
            <el-tooltip
              class="item"
              effect="dark"
              content={`${node.label}`}
              placement="right-end"
            >
              ( <span>{node.label}</span>)
            </el-tooltip>
          ) : (
            <span>{node.label}</span>
          )}
        </span>
      );
    },
    resetData() {
      this.clickValue = {};
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.data = response.data;
      });
    },
    handleNodeClick(val) {
      console.log(this.searchJson);
      const params = {};
      if (
        this.searchJson?.pageType === "leftTreeRightTableDept" &&
        this.searchJson?.pageRelationField
      ) {
        // params[this.searchJson.pageRelationField] = val.id;
        params.sx__type = "treeTable";
        params.sx__tree = "sys_dept";
        params.sx__id = val.id;
        params.sx__cname = this.searchJson.pageRelationField;
      } else if (
        this.searchJson?.pageType === "leftTreeRightTable" &&
        this.searchJson?.treeRelationPage
      ) {
        // params[this.searchJson.pageRelationField] =
        //   val[this.searchJson.treeRelationField];
        params.sx__type = "treeTable";
        params.sx__tree = `${this.searchJson.treeRelationPage}`.replace(
          /[A-Z]/g,
          function (match, letter) {
            return "_" + match.toLowerCase();
          }
        );
        params.sx__id = val[this.searchJson.treeRelationField];
        params.sx__cname = this.searchJson.pageRelationField;
      }
      this.clickValue = params;
      this.getList();
    },
    async getOtherList(code) {
      const res = await crudQueryList(code, {});
      if (res.code === 200) {
        this.data = res.data?.rows;
      }
    },
  },
  mounted() {
    if (this.searchJson?.pageType === "leftTreeRightTableDept") {
      this.defaultProps = {
        children: "children",
        label: "label",
      };
      this.getDeptTree();
    } else if (
      this.searchJson?.pageType === "leftTreeRightTable" &&
      this.searchJson?.treeRelationPage
    ) {
      this.defaultProps = {
        children: "children",
        label: this.searchJson?.treeDisplayField,
      };
      this.getOtherList(this.searchJson?.treeRelationPage);
    }
  },
};
</script>
<style lang="scss" scoped>
.treeCnt {
  height: 74vh;
  width: 260px;
  overflow-y: scroll;
}
::v-deep .el-tree-node {
  .el-tooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    width: 80%;
    display: inline-block;
  }
}
::v-deep .el-tree-node__content {
  font-size: 13px;
}
::v-deep .custom-tree-node {
  width: 100%;
}
</style>